<script setup>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';

//挂载之前
onBeforeMount(()=>{
    console.log("调用函数onBeforeMount")
})

//挂在之后
onMounted(()=>{
    console.log("调用函数onMounted")
})

//更新组件数据之前
onBeforeUpdate(()=>{
    console.log("调用函数onBeforeUpdate")
})


//更新组件数据之后
onUpdated(()=>{
    console.log("调用函数onUpdated")
})

//销毁当前组件之前
onBeforeUnmount(()=>{
    console.log("调用函数onBeforeUnmount")
})


//销毁当前组件之后
onUnmounted(()=>{
    console.log("调用函数onUnmounted")
})

const titleInfo = ref('默认标题')
</script>

<template>
<div>
<h2>{{ titleInfo }}</h2>
<!-- 在input内容修改后，会调用onBeforeUpdate，onUpdated -->
<input type="text" v-model.lazy="titleInfo">
</div>
</template>